<template>
    <!--搜索结果主页-->
    <view class="search-result-index-containter">
        <block v-if="productList.length === 0">
            <view class="empty-container-search">
                <image class="empty-icon_0" src="../../static/img/apollo/search_empty.png"></image>
                <view class="empty-tips_0">没有找到您要的宝贝</view>
            </view>
            <HotRecommend></HotRecommend>
        </block>
        <block v-else>
            <!--搜索结果输入栏-->
            <view class="search-result-input-containter">
                <view class="search-result-top" :style="{ margin: historySearchTxt ? -56 : '0 rpx 0 0' }">
                    <input class="search-result-top-input" :style="{ 'pointer-events': historySearchTxt ? 'none' : 'auto' }"
                        disabled bindtap="onClickInput" :placeholder="historySearchTxt ? '' : '搜索商品'" />
                    <!--上方输入框-->
                    <view class="search-result-top-icon">
                        <image class="search-result-top-icon-search" src="../../static/img/common/icon_search.png" />
                    </view>
                </view>
                <view class="searchTxt-containter" v-if="historySearchTxt">
                    <view class="searchTxt" @tap="onClearSearchTxT">{{ historySearchTxt }} ×</view>
                </view>
            </view>
            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="queryNextPageDetails">
                <view>
					<view class="module_title" v-for="item in productList" :key="item.productId">
						<Goods :item="item">
						</Goods>
					</view>
                    
                    <uni-load-more :clickLoadMore="queryNextPageDetails" v-if="productList.length !== 0"
                        :status="hasMore"></uni-load-more>
                </view>
            </scroll-view>
        </block>
    </view>
</template>

<script>
import {
    common
} from '../../services/index.js';
import Big from 'big.js';
import Goods from '../components/goods';
import HotRecommend from '../components/hotRecommend/index.vue';

export default {
    data() {
        return {
            totalPage: 0, //总页数
            current: 1, //当前页码
            size: 20, //每一页的商品数量
            ajaxLoading: false,
            productList: [],
            arrModuleData: {},
            historySearchTxt: '',
            hasMore: 'more',
        }
    },
    mounted() {
    },
    onLoad() {

    },
    components: {
        Goods,
        HotRecommend
    },
    methods: {
        onLoad(params) {
            if (params.content) {
                uni.showLoading();
                params.content && this.productSearch(params.content);
                this.historySearchTxt = params.content;
            }

        },
        async productSearch(content) {
            let res = await common.productSearch({
                pageNo: this.current,
                pageSize: this.size,
                content
            });
            if (res.code === 200) {
                this.totalPage = res.data.pages;
                this.hasMore = (this.current === res.data.pages) ? 'noMore' : 'more';
                console.log(this.hasMore);
                this.current += 1;
                res.data.records.forEach((e) => {
                    e.originalPrice = new Big(e.originalPrice).div(100);
                    e.currentPrice = new Big(e.currentPrice).div(100);
                })
                this.productList = this.productList.concat(res.data.records);
            }
            uni.hideLoading();
        },
        async queryNextPageDetails() {
            if (this.ajaxLoading) {
                return false;
            }
            if (this.current > this.totalPage) {
                return;
            }
            uni.showLoading();
            this.ajaxLoading = true;
            let res = await common.productSearch({
                pageNo: this.current,
                pageSize: this.size,
                content: this.historySearchTxt
            });
            if (res.code === 200) {
                this.totalPage = res.data.pages;
                this.hasMore = (this.current === res.data.pages) ? 'noMore' : 'more';
                this.current += 1;
                res.data.records.forEach((e) => {
                    e.originalPrice = new Big(e.originalPrice).div(100);
                    e.currentPrice = new Big(e.currentPrice).div(100);
                })
                this.productList = this.productList.concat(res.data.records);
            }
            this.ajaxLoading = false;
            uni.hideLoading();
        },
        onReachBottom: function () {
			this.queryNextPageDetails();
		},
        onClearSearchTxT() {
            wx.navigateBack({//返回上一页
                delta: 1
            })
        }
    }
}
</script>

<style scoped>
.search-result-input-containter {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100rpx;
    z-index: 999;
    /*background: #fff;*/
	background-color: rgb(247, 247, 247);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.search-result-top {
    width: 100%;
    height: 60rpx;
    position: relative;
    margin: -56rpx 0 0;
}

.search-result-top-input {
    font-size: 28rpx;
    color: rgba(153, 153, 153, 1);
    line-height: 36rpx;
    width: calc(87% - 60rpx);
    height: 60rpx;
    background: rgba(247, 247, 247, 1);
    border-radius: 30rpx;
    margin: 0 5%;
    padding-left: calc(3% + 60rpx);
    pointer-events: none;
}

.search-result-top-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 84%;
    margin: -44rpx 8% 0 8%;
    z-index: 1;
}

.search-result-top-icon-search {
    width: 26rpx;
    height: 28rpx;
    z-index: 1;
}

.searchTxt-containter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: -54rpx 0;
    z-index: 1;
    width: 70%;
}

.searchTxt {
    z-index: 3;
    font-size: 24rpx;
    color: rgba(255, 255, 255);
    background: #999;
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
}


.search-result-index-containter {
    position: relative;
    width: 100%;
    padding-top: 110rpx;
}

.search-result-wrap {
    width: 100%;
}

.empty-icon {
    width: 443rpx;
    height: 313rpx;
    margin-left: calc((100% - 443rpx) * 0.5);
    margin-top: 150rpx;
}

.empty-tips {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    color: #666666;
    line-height: 43rpx;
}

.empty-icon_0 {
    width: 414rpx;
    height: 188rpx;
    margin-left: calc((100% - 414rpx) * 0.5);
    padding-top: 50rpx;
}

.empty-tips_0 {
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    color: #666666;
    line-height: 43rpx;
    margin-top: 50rpx;
}

.empty-container-search {
    background-color: #fff;
    width: 100%;
    height: 400rpx;
    margin-bottom: 20rpx;
}

.module_title {
    box-shadow: 0rpx 9rpx 30rpx 0rpx rgba(6, 4, 3, 0.19);
    border-radius: 20rpx;
    margin-bottom: 4%;
    background-color: #fff;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 15rpx;
}
</style>